<template>
	<div>
	    <div class="title">周末去哪儿</div>
		<ul>
			<li class="item border-bottom" v-for="item of list" :key='item.id'>
			<div class="item-image-wrapper">
				<img class="item-img" :src="item.imgUrl" alt="">
			</div>
				
			<div class="item-info">
				<p class="item-title">{{item.title}}</p>
			    <p class="item-desc">{{item.desc}}</p>
			</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeRecommend',
		props: {
			list: Array
		}
	}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'                                     
	.title
	  line-height: .8rem
	  background: #eee
	  text-indent: .2rem
	.item-image-wrapper
      overflow:hidden
      height: 0
      padding-bottom: 38%
	.item-img
	  width: 100%
	.item-info
	  .item-title
	    line-height: .54rem
	    font-size: .32rem
	    ellipsis()  
	    margin:.1rem .15rem
	  .item-desc
	    line-height: .4rem
	    color: #ccc
	    ellipsis()
	    margin:.1rem .15rem
</style>